<!--
 * @Description: 创建班级功能设置
 * @Author: liyujie
 * @Date: 2021/07/20
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/07/26
-->
<template>
    <section class="wrapper">
        <div class="content-wrapper">
            <!-- header -->
            <div class="header">
                功能设置
                <div
                    class="back"
                    @click="handleRoute('createClass')"
                >返回
                </div>
            </div>
            <!-- /header -->
            <div>
                <div class="form-view">
                    <!--表单-->
                    <el-form
                        :model="ruleForm"
                        :rules="rules"
                        label-position="right"
                        ref="ruleForm"
                        label-width="162px"
                        class="form-wrap"
                        @submit.native.prevent
                    >
                        <div class="form-title">基本信息</div>
                        <el-form-item
                            label="活动名称"
                            prop="title"
                            class="is-required"
                        >
                            <el-input
                                v-model="ruleForm.title"
                                size="medium"
                                clearable
                                placeholder="请输入活动名称"
                                style="width: 468px"
                                maxlength="20"
                                show-word-limit
                            />
                        </el-form-item>
                        <el-form-item
                            label="任务图标"
                            prop="task_logo"
                            class="is-required image-label"
                        >
                            <image-upload
                                v-model="ruleForm.task_logo"
                                :limit="20"
                                tips="图标大小120*120px，小于20kb"
                                class="task-logo-wrapper"
                            />
                        </el-form-item>
                        <el-form-item
                            label="创建班级APP显示金额"
                            prop="award_money"
                            class="is-required"
                        >
                            <el-input
                                v-model="ruleForm.award_money"
                                size="medium"
                                clearable
                                placeholder="请输入奖励金额"
                                style="width: 284px"
                                @blur="getPlatformMoney"
                            >
                                <span
                                    slot="suffix"
                                    style="margin-right: 6px"
                                >元</span>
                            </el-input>
                            <span
                                class="form-tips"
                                v-if="platform_money"
                            >说明：创建班级加上一级佣金，平台需支出<span style="color: #FF8E39">{{ platform_money }}元</span>
                        </span></el-form-item>
                        <el-form-item
                            label="精英等级"
                            prop="agent_level"
                            class="is-required"
                        >
                            <el-select
                                placeholder="全部"
                                v-model="ruleForm.agent_level"
                                size="medium"
                                style="width: 284px"
                            >
                                <el-option
                                    v-for="item in 5"
                                    :key="item"
                                    :label="`E${item - 1}以上（含E${item - 1}）`"
                                    :value="item - 1"
                                />
                                <el-option
                                    label="E5"
                                    :value="5"
                                />
                            </el-select>
                        </el-form-item>
                        <el-form-item
                            label="APP显示状态"
                            prop="show"
                            class="is-required"
                            style="margin-bottom: 12px"
                        >
                            <el-radio-group
                                v-model="ruleForm.show"
                                size="medium"
                            >
                                <el-radio :label="1">显示</el-radio>
                                <el-radio :label="0">隐藏</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item
                            label="活动状态"
                            prop="task_status"
                            class="is-required"
                            style="margin-bottom: 12px"
                        >
                            <el-radio-group
                                v-model="ruleForm.task_status"
                                size="medium"
                            >
                                <el-radio :label="1">上架</el-radio>
                                <el-radio :label="0">下架</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item
                            label="开通班级数量上限"
                            prop="submit_limit_count_type"
                            class="is-required"
                            style="margin-bottom: 12px"
                        >
                            <el-radio-group
                                v-model="ruleForm.submit_limit_count_type"
                                size="medium"
                            >
                                <el-radio :label="0">不限制</el-radio>
                                <el-radio :label="1">限制</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item v-if="ruleForm.submit_limit_count_type === 1">
                            <div class="limit-wrapper">
                                <div class="limit-header">限制设置</div>
                                <div class="limit-content">
                                    <div
                                        class="limit-item"
                                        v-for="(item, index) in ruleForm.submit_limit_count_config"
                                        :key="index"
                                    >
                                        <span>· 精英等级：E{{ item.agent_level }}</span>
                                        <el-select
                                            v-model="item.limit_type"
                                            size="medium"
                                            style="width: 104px;margin-right: 32px"
                                        >
                                            <el-option
                                                label="每天"
                                                :value="1"
                                            />
                                            <el-option
                                                label="每周"
                                                :value="2"
                                            />
                                        </el-select>
                                        <span>最多可开通</span>
                                        <el-form-item
                                            :prop="`submit_limit_count_config[${index}].limit_count`"
                                            :rules="rules.limit_count"
                                        >
                                            <el-input-number
                                                v-model="item.limit_count"
                                                placeholder="请输入"
                                                :step="1"
                                                step-strictly
                                                :controls="false"
                                                :min="1"
                                                size="medium"
                                                style="width: 160px"
                                            />
                                        </el-form-item>
                                        <span style="margin-left: 10px">个班级</span>
                                    </div>
                                </div>
                            </div>
                        </el-form-item>
                        <!--活动规则-->
                        <div class="form-title">活动规则</div>
                        <el-form-item label-width="54px">
                            <div class="tools-wrapper">
                                <div
                                    class="tools-item"
                                    v-for="(item,index) in toolsList"
                                    :key="index"
                                    @click="addFormItem(item, 'rule_info')"
                                >
                                    <div class="tools-title">
                                        <i
                                            class="iconfont left-icon"
                                            :class="item.leftIcon"
                                        />
                                        <div class="text">{{ item.title }}</div>
                                    </div>
                                    <i class="el-icon-plus"/>
                                </div>
                            </div>
                            <div
                                class="tools-form-view"
                                v-if="ruleForm.rule_info.length"
                            >
                                <div
                                    class="tools-form-item"
                                    v-for="(item,index) in ruleForm.rule_info"
                                    :key="index"
                                >
                                    <el-form-item
                                        :label="item.type === 1 ? '标题' : item.type === 2 ? '正文' : '图片'"
                                        label-width="44px"
                                        :style="{flex: item.type === 3 ? '' : 1}"
                                        :class="item.type === 3 ? 'image-label' : ''"
                                    >
                                        <el-input
                                            v-model="item.content"
                                            size="medium"
                                            clearable
                                            placeholder="请输入标题"
                                            v-if="item.type === 1"
                                        />
                                        <el-input
                                            v-model="item.content"
                                            type="textarea"
                                            placeholder="请输入正文"
                                            :autosize="{ minRows: 4}"
                                            v-if="item.type === 2"
                                        />
                                        <image-upload
                                            v-model="item.content"
                                            :limit="200"
                                            tips="图片宽度750px，高度不限，小于200kb"
                                            v-if="item.type === 3"
                                        />
                                    </el-form-item>
                                    <div
                                        class="option-btn"
                                        :class="item.type === 3 ? 'image' : ''"
                                    >
                                        <el-button
                                            type="text"
                                            size="medium"
                                            v-if="index !== ruleForm.rule_info.length - 1"
                                            @click="handleOptions(index, 'down', 'rule_info')"
                                        >
                                            下移
                                        </el-button>
                                        <el-button
                                            type="text"
                                            size="medium"
                                            v-if="index !== 0"
                                            @click="handleOptions(index, 'up', 'rule_info')"
                                        >
                                            上移
                                        </el-button>
                                        <el-button
                                            type="text"
                                            size="medium"
                                            style="color: #F95B56"
                                            @click="handleOptions(index, 'delete', 'rule_info')"
                                        >
                                            删除
                                        </el-button>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="empty-view"
                                v-else
                            >
                                暂未添加活动规则，点击上方面板添加对应的内容项哦～
                            </div>
                            <el-button
                                size="medium"
                                style="width: 120px"
                                @click="$refs.inviteRulesPreview.show(ruleForm.rule_info)"
                            >
                                效果预览
                            </el-button>
                        </el-form-item>
                        <!--活动攻略-->
                        <div class="form-title">活动攻略</div>
                        <el-form-item label-width="54px">
                            <div class="tools-wrapper">
                                <div
                                    class="tools-item"
                                    v-for="(item,index) in toolsList"
                                    :key="index"
                                    @click="addFormItem(item, 'tips_info')"
                                >
                                    <div class="tools-title">
                                        <i
                                            class="iconfont left-icon"
                                            :class="item.leftIcon"
                                        />
                                        <div class="text">{{ item.title }}</div>
                                    </div>
                                    <i class="el-icon-plus"/>
                                </div>
                            </div>
                            <div
                                class="tools-form-view"
                                v-if="ruleForm.tips_info.length"
                            >
                                <div
                                    class="tools-form-item"
                                    v-for="(item,index) in ruleForm.tips_info"
                                    :key="index"
                                >
                                    <el-form-item
                                        :label="item.type === 1 ? '标题' : item.type === 2 ? '正文' : '图片'"
                                        label-width="44px"
                                        :style="{flex: item.type === 3 ? '' : 1}"
                                        :class="item.type === 3 ? 'image-label' : ''"
                                    >
                                        <el-input
                                            v-model="item.content"
                                            size="medium"
                                            clearable
                                            placeholder="请输入标题"
                                            v-if="item.type === 1"
                                        />
                                        <el-input
                                            v-model="item.content"
                                            type="textarea"
                                            placeholder="请输入正文"
                                            :autosize="{ minRows: 4}"
                                            v-if="item.type === 2"
                                        />
                                        <image-upload
                                            v-model="item.content"
                                            :limit="200"
                                            tips="图片宽度750px，高度不限，小于200kb"
                                            v-if="item.type === 3"
                                        />
                                    </el-form-item>
                                    <div
                                        class="option-btn"
                                        :class="item.type === 3 ? 'image' : ''"
                                    >
                                        <el-button
                                            type="text"
                                            size="medium"
                                            v-if="index !== ruleForm.tips_info.length - 1"
                                            @click="handleOptions(index, 'down', 'tips_info')"
                                        >
                                            下移
                                        </el-button>
                                        <el-button
                                            type="text"
                                            size="medium"
                                            v-if="index !== 0"
                                            @click="handleOptions(index, 'up', 'tips_info')"
                                        >
                                            上移
                                        </el-button>
                                        <el-button
                                            type="text"
                                            size="medium"
                                            style="color: #F95B56"
                                            @click="handleOptions(index, 'delete', 'tips_info')"
                                        >
                                            删除
                                        </el-button>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="empty-view"
                                v-else
                            >
                                暂未添加活动攻略，点击上方面板添加对应的内容项哦～
                            </div>
                            <el-button
                                size="medium"
                                style="width: 120px"
                                @click="$refs.inviteTipsPreview.show(ruleForm.tips_info)"
                            >
                                效果预览
                            </el-button>
                        </el-form-item>
                        <div class="form-title">温馨提示</div>
                        <el-form-item
                            prop="cozy_tip"
                            label-width="54px"
                        >
                            <el-input
                                v-model="ruleForm.cozy_tip"
                                type="textarea"
                                class="tips-textarea"
                                placeholder="请输入内容"
                                :autosize="{ minRows: 10 }"
                            />
                        </el-form-item>
                    </el-form>
                </div>

                <!-- button -->
                <div class="footer">
                    <el-button
                        size="medium"
                        type="default"
                        @click="handleCancel()"
                    >
                        返回
                    </el-button>
                    <el-button
                        size="medium"
                        type="primary"
                        @click="handleSubmit()"
                    >
                        保存
                    </el-button>
                </div>
            </div>
        </div>
        <!--活动规则预览弹窗-->
        <invite-rules-preview
            ref="inviteRulesPreview"
        />
        <!--活动攻略预览弹窗-->
        <invite-tips-preview
            ref="inviteTipsPreview"
            :title="ruleForm.title"
        />
    </section>
</template>

<script>
import {back} from '@/mixin/back';
import {deepClone} from "@/assets/js/utils";
import ImageUpload from "@/components/common/image-upload";
import ImageUploadMultiple from "@/components/common/image-upload-multiple";
import InviteRulesPreview from "@/components/invite-friends/invite-rules-preview";
import InviteTipsPreview from "@/components/invite-friends/invite-tips-preview";

const numberReg = /(?:^[1-9]([0-9]+)?(?:\.[0-9]{1,2})?$)|(?:^(?:0)$)|(?:^[0-9]\.[0-9](?:[0-9])?$)/;

export default {
    name: 'CreateClassConfig',
    mixins: [back],
    components: {InviteTipsPreview, InviteRulesPreview, ImageUploadMultiple, ImageUpload},
    data() {
        return {
            ruleForm: {
                // 活动名称
                title: '',
                // 活动图标
                task_logo: '',
                // 显示金额
                award_money: '',
                // 精英等级
                agent_level: 0,
                // 显示状态0：不显示1：显示
                show: 1,
                // 活动状态0:下架1：上架
                task_status: 1,
                // 任务规则
                rule_info: [],
                // 任务攻略
                tips_info: [],
                // 温馨提示
                cozy_tip: '',
                submit_limit_count_type: 0,
                submit_limit_count_config: [
                    {agent_level: 0, limit_type: 1},
                    {agent_level: 1, limit_type: 1},
                    {agent_level: 2, limit_type: 1},
                    {agent_level: 3, limit_type: 1},
                    {agent_level: 4, limit_type: 1},
                    {agent_level: 5, limit_type: 1},
                ]
            },
            rules: {
                title: [
                    {required: true, message: '请填写活动名称', trigger: 'blur'}
                ],
                task_logo: [
                    {required: true, message: '请上传任务图标', trigger: 'change'}
                ],
                award_money: [
                    {required: true, message: '请输入创建班级APP显示金额', trigger: 'blur'},
                    {pattern: numberReg, message: '金额必须为数字', trigger: 'blur'},
                ],
                limit_count: [
                    {required: true, message: '请输入限制数量', trigger: 'blur'},
                ],
            },
            toolsList: [{
                leftIcon: 'el-icon-hand-biaoti3',
                title: '标题',
                type: 1
            }, {
                leftIcon: 'el-icon-hand-zhengwen1',
                title: '正文',
                type: 2
            }, {
                leftIcon: 'el-icon-hand-tupian',
                title: '图片',
                type: 3
            }],
            // 平台要支出的金额
            platform_money: '',
            authResult: {}
        };
    },
    computed: {},
    filters: {},
    watch: {},
    mounted() {
        this.$store.commit('SET_HEADER', [{title: "APP后台"}, {title: '社交'}, {title: '班级管理'}, {
            title: '创建同校班级',
            path: '/student/create-class'
        }, {title: '功能设置'}]);
        this.authResult = this.$route.meta.authResult;
        this.getDetailData();
    },

    methods: {

        /**
         * @description 获取数据
         */
        getDetailData() {
            this.$post('/student/task_stuagent_extra_class_create%5Cget', {}, resp => {
                if (resp.code === 1) {
                    this.ruleForm = resp.data;
                    this.getPlatformMoney();
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning'
                    });
                }
                this.tableLoading = false;
            });
        },

        /**
         * 路由跳转
         * @param routeName
         * @param query
         */
        handleRoute(routeName, query) {
            this.$router.push({
                name: routeName,
                query
            });
        },

        /**
         * @description 提交
         */
        handleSubmit() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    let params = deepClone(this.ruleForm);

                    params.rule_info_json = JSON.stringify(params.rule_info);
                    params.tips_info_json = JSON.stringify(params.tips_info);
                    params.submit_limit_count_config = JSON.stringify(params.submit_limit_count_config);
                    delete params.rule_info;
                    delete params.tips_info;
                    this.$post('/student/task_stuagent_extra_class_create%5Csave', params, resp => {
                        if (resp.code === 1) {
                            this.$notify({
                                title: '提示',
                                message: '保存成功',
                                duration: 2000,
                                type: 'success'
                            });
                            this.$router.push({
                                name: 'createClass'
                            });
                        } else {
                            this.$notify({
                                title: '提示',
                                message: resp.msg,
                                duration: 2000,
                                type: 'warning'
                            });
                        }
                    });
                } else {
                    // 校验不通过
                    if(document.getElementsByClassName('el-form-item__error').length > 0){
                        this.$notify.warning({
                            title: '提示',
                            message: document.getElementsByClassName('el-form-item__error')[0].innerText
                        });
                    }
                    return false;
                }
            });
        },

        /**
         * @description 返回
         */
        handleCancel() {
            this.$zdConfirm('离开此页面后，已填写的信息将不会保存，确认离开此页面吗？', '温馨提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$router.push({
                    name: 'createClass'
                });
            });
        },

        /**
         * 添加内容
         * @param item
         * @param arr
         */
        addFormItem(item, arr) {
            this.ruleForm[arr].push({
                type: item.type,
                content: ''
            });
        },

        /**
         * 上移下移
         * @param index
         * @param type - 上移还是下移
         * @param arr 操作的数组
         */
        handleOptions(index, type, arr) {
            if (type === 'up') {
                this.swapArray(this.ruleForm[arr], index - 1, index);
            }

            if (type === 'down') {
                this.swapArray(this.ruleForm[arr], index, index + 1);
            }

            if (type === 'delete') {
                this.ruleForm[arr].splice(index, 1);
            }
        },

        /**
         * 数组元素交换位置
         * @param arr
         * @param index1
         * @param index2
         * @returns {*}
         */
        swapArray(arr, index1, index2) {
            arr[index1] = arr.splice(index2, 1, arr[index1])[0];
            return arr;
        },

        /**
         * 获取平台需要支出金额
         */
        getPlatformMoney() {
            this.$post('/student/task_stuagent%5Cget_stuagent_task_money', {task_money: this.ruleForm.award_money}, resp => {
                if (resp.code === 1) {
                    this.platform_money = (this.ruleForm.award_money / resp.data.discount).toFixed(2);
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },
    }
};
</script>

<style lang="less" scoped>
.wrapper {
    width: 100%;

    .content-wrapper {
        display: flex;
        height: calc(100% - 24px);
        flex-direction: column;
        position: relative;
        margin: 12px;
        background: #fff;
        box-sizing: border-box;
        overflow-y: auto;

        &::-webkit-scrollbar {
            width: 4px;
        }

        /*header*/

        .header {
            width: 100%;
            padding: 0 32px 0 35px;
            height: 68px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            white-space: nowrap;
            box-sizing: border-box;
            color: rgba(51, 51, 51, 1);
            font-size: 20px;
            font-weight: 500;
            position: relative;
            border-bottom: 1px rgba(233, 233, 233, 1) solid;
            flex-shrink: 0;

            &::before {
                content: '';
                background: rgba(24, 144, 255, 1);
                width: 3px;
                height: 20px;
                position: absolute;
                top: 23px;
                left: 25px;
            }

            .back {
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
                cursor: pointer;
            }
        }
    }

    /deep/ .el-form {
        .is-required {
            .el-form-item__label {
                &:before {
                    content: "*";
                    display: inline-block;
                    color: #F56C6C;
                }
            }
        }

        .image-label {
            .el-form-item__label {
                margin-top: 40px;
            }
        }
    }

    .form-view {
        background: #FBFBFB;
        border-radius: 2px;
        border: 1px solid #EEEEEE;
        margin: 24px 32px;
        box-sizing: border-box;
        padding: 32px;

        .form-tips {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            margin-left: 12px;
        }

        .form-title {
            font-size: 16px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #333333;
            padding-bottom: 12px;
            border-bottom: 1px solid #E9E9E9;
            margin-bottom: 24px;
            margin-top: 52px;

            &:first-of-type {
                margin-top: 0;
            }
        }

        .task-logo-wrapper {
            /deep/ .pic-view {
                display: flex;
                align-items: flex-end;

                .tips {
                    margin-bottom: 26px;
                }
            }
        }

        .tools-wrapper {
            display: flex;
            margin-bottom: 24px;

            .tools-item {
                width: 238px;
                height: 50px;
                background: #FFFFFF;
                border-radius: 4px;
                border: 1px solid #DFE4ED;
                margin-right: 24px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 12px;
                font-size: 16px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;

                &:hover {
                    color: #20A0FF;
                    border: 1px solid #20A0FF;
                    transition: all .2s;
                }

                .tools-title {
                    display: flex;
                    align-items: center;

                    .text {
                        font-size: 16px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                    }
                }

                .left-icon {
                    font-size: 20px;
                    margin-right: 6px;
                    color: #20A0FF;
                }

                .el-icon-plus {
                    font-size: 14px;
                }
            }
        }

        .empty-view {
            height: 84px;
            background: #F7F7F7;
            border-radius: 2px;
            border: 1px dashed #CAD0DC;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 24px;
        }

        .tools-form-view {
            background: #F7F7F7;
            border-radius: 4px;
            border: 1px solid #CAD0DC;
            padding: 32px;
            margin-bottom: 24px;

            .tools-form-item {
                display: flex;
                align-items: center;
                margin-bottom: 24px;

                .option-btn {
                    width: 160px;
                    margin-left: 32px;

                    .el-button {
                        margin-right: 14px;
                    }

                    &.image {
                        margin-left: -120px;
                        margin-top: -24px;
                        position: relative;
                    }
                }
            }
        }
        .limit-wrapper {
            width: 608px;
            background: #F7F7F7;
            border-radius: 4px;
            border: 1px solid #EEEEEE;
            .limit-header {
                height: 44px;
                background: #F2F2F2;
                border-radius: 4px 4px 0 0;
                padding: 0 24px;
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #DCDFE6;
            }
            .limit-content {
                padding: 24px;
                .limit-item {
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    margin-bottom: 24px;
                    span {
                        margin-right: 10px;
                    }
                }
            }
        }
    }

    /*footer*/

    .footer {
        box-sizing: border-box;
        padding-left: 176px;
        margin-top: 8px;
        margin-bottom: 52px;

        .el-button {
            width: 120px;
            margin: 0 16px 12px;
        }
    }

    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow: 0 1px 0 0 rgba(233, 233, 233, 1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;

        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }

        .el-icon-close:before {
            color: rgb(194, 194, 194);
            font-size: 17px;
            font-weight: bold;
        }

        .el-dialog__headerbtn {
            top: 14px;
        }
    }

    /deep/ .el-dialog__body {
        padding: 0;
    }

    /deep/ .el-textarea__inner {
        resize: none;
    }

    /deep/ .el-table__fixed-right {
        right: 6px !important;
    }
    /deep/ .tips-textarea {
        .el-textarea__inner {
            padding: 24px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 22px;
        }
    }

    /deep/ .el-input-number .el-input__inner {
        text-align: left;
    }
}
</style>
